<!--
 * @Description: 生产任务单明细
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-19 09:49:19
 * @FilePath: /yuxiuproweb/src/views/qb/qb/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="'修改任务单'"
    :visible.sync="shows"
    width="60vw"
    append-to-body
  >
    <!-- direction="vertical" -->
    <el-descriptions
      border
      :column="2"
      :size="'medium'"
      :label-style="label_style"
      :contentStyle="content_style"
    >
      <el-descriptions-item label="工单号" label-class-name="myLabel">
        <span>{{ form.workOrderNumber }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="销售单号" label-class-name="myLabel">
        <span>{{ form.number }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="审核日期" label-class-name="myLabel">
        <span>{{ form.approvedTime }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="状态" label-class-name="myLabel">
        <span>{{ form.status }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="型号" label-class-name="myLabel">
        <span>{{ form.modelNumber }}</span>
      </el-descriptions-item>

      <el-descriptions-item label="长度" label-class-name="myLabel">
        <span>{{ form.length }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="高度" label-class-name="myLabel">
        <span>{{ form.height }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="工艺要求" label-class-name="myLabel">
        <span v-if="form.technology == 0">冷胶</span>
        <span v-else-if="form.technology == 1">热胶</span>
        <span v-else-if="form.technology == 3">先冷后热</span>
        <span v-else>无工艺</span>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="类型" label-class-name="myLabel">
        <span>{{ form.fabricType }}</span>
      </el-descriptions-item> -->

      <el-descriptions-item label="客户" label-class-name="myLabel">
        <span>{{ form.clientName }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="联系电话" label-class-name="myLabel">
        <span>{{ form.contactNumber }}</span>
      </el-descriptions-item>

      <el-descriptions-item
        label="收货地址"
        label-class-name="myLabel"
        :span="2"
      >
        <span>{{ form.address }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="收货人" label-class-name="myLabel">
        <span>{{ form.contacts }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="物流单号" label-class-name="myLabel">
        <el-input
          v-model="form.logisticsNumber"
          placeholder="请输入物流单号"
          type="input"
        />
      </el-descriptions-item>
      <el-descriptions-item label="发货方式" label-class-name="myLabel">
        <!-- <span>{{ form.fabricType }}</span> -->
        <el-select
          v-model="deliveryMethod"
          placeholder="请选择配送方式"
          style="width: 100%"
          @change="changeDelivery"
        >
          <el-option
            v-for="item in companyList"
            :key="item.logisticsCompanyId"
            :label="item.name"
            :value="item.logisticsCompanyId"
          >
            <span style="float: left">{{ item.name }}</span>
            <span
              style="
                float: right;
                text-align: right;
                color: #8492a6;
                font-size: 13px;
              "
            >
              {{
                item.paymentMethod == 0
                  ? "寄付"
                  : item.paymentMethod == 1
                  ? "到付"
                  : "包邮"
              }}</span
            >
          </el-option>
        </el-select>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="仓库" label-class-name="myLabel">
        <span>{{ form.address }}</span>
      </el-descriptions-item> -->

      <el-descriptions-item label="货位" label-class-name="myLabel">
        <!-- <el-input
          v-model="form.areaName"
          placeholder="请输入货位"
          type="input"
        /> -->
        <el-select
          style="width: 100%"
          v-model="form.areaName"
          clearable
          filterable
          placeholder="请选择货位"
          remote
          reserve-keyword
          :remote-method="getAreaList"
          @change="handleAreaChange"
          @clear="form.areaName='';form.areaId=''"
        >
          <el-option
            v-for="item in areaList"
            :key="item.areaName"
            :label="item.areaName"
            :value="item.areaName"
          >
            <span style="float: left">{{ item.areaName }}</span>
            <span
              style="
                float: right;
                text-align: right;
                color: #8492a6;
                font-size: 13px;
              "
            >
              {{ item.warehouseName }}</span
            >
          </el-option>
        </el-select>
      </el-descriptions-item>

      <el-descriptions-item label="发货日期" label-class-name="myLabel">
        <!-- <span>{{ form.deliveryTime }}</span> -->
        <el-date-picker
          style="width: 100%"
          v-model="form.deliveryTime"
          type="date"
          placeholder="YYYY-MM-DD"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-descriptions-item>

      <el-descriptions-item
        label="订单备注"
        label-class-name="myLabel"
        :span="2"
      >
        <el-input
          v-model="form.orderRemark"
          placeholder="请输入内容"
          type="textarea"
          :rows="2"
        />
      </el-descriptions-item>
      <el-descriptions-item label="批号" label-class-name="myLabel">
        <span>{{ form.batchNumber }}</span>
      </el-descriptions-item>
      <el-descriptions-item
        label="操作"
        label-class-name="myLabel"
        v-if="form.process != '已发货'"
      >
        <!-- operateBtnGroup-->
        <div class="">
          <el-button size="default" type="success" @click="submitForm"
            >保存</el-button
          >
          <el-button size="default" @click="shows = false">关闭</el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <!--  -->
  </el-dialog>
</template>

<script>
import { updateTaskOrder } from "@/api/qb";
import { getAddressList } from "@/api/transport/shipAddress";
import { getWarehouseLocationList } from "@/api/mes/wm/warehouseLocation";
import { listCompany } from "@/api/transport/logistics";
export default {
  components: {},
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 表单参数
      form: {},
      list: [],
      areaList: [],
      deliveryMethod: "",
      selInventoryRow: {},
      companyList: [],
      addressList: [],
      label_style: {
        "text-align": "center", //文本居中
        "font-weight": "600",
        width: "140px",
        "word-break": "keep-all",
        padding: "6px",
      },
      content_style: {
        "min-width": "200px",
        "word-break": "break-all", //过长时自动换行
      },
      // 禁用今天以前的日期
      pickerOptions: {
        disabledDate(v) {
          return v.getTime() < new Date().getTime() - 86400000; //  - 86400000是否包括当天
        },
      },
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    this.listCompany();
    this.getAddressList(); //收货地址
    this.getAreaList(); //
    this.getList();
  },
  methods: {
    getList() {
      this.form = Object.assign({}, this.data);
      console.log("form", this.form);
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form);
      updateTaskOrder(this.form).then((res) => {
        this.$modal.msgSuccess(res.msg || "修改成功");
        this.shows = false;
        this.$emit("update");
      });
    },
    // 选择批号信息
    selRowVal(row) {
      this.selInventoryRow = row;
    },
    // 切换备料-修改批号
    changeInventory() {
      this.form.batchNumber = this.selInventoryRow.batchNumber;
      updateTaskOrder(this.form).then((res) => {
        this.$modal.msgSuccess(res.msg || "修改成功");
        this.shows = false;
        this.$emit("update");
      });
    },
    // 物流公司
    listCompany() {
      listCompany().then((response) => {
        this.companyList = response.rows;
        // deliveryMethod
        this.initDelivery(
          this.form.deliveryMethod,
          this.form.postageModeOfPayment
        );
      });
    },
    initDelivery(val, postageModeOfPayment) {
      var index = this.companyList.findIndex(
        (e) => e.name == val && e.paymentMethod == postageModeOfPayment
      );
      if (index != -1) {
        // 0 寄付 1 到付 2包邮
        var way = "到付";
        if (this.companyList[index].paymentMethod == 2) {
          way = "包邮";
        } else if (this.companyList[index].paymentMethod == 0) {
          way = "寄付";
        }
        this.deliveryMethod = val + "(" + way + ")";
      }
    },
    //
    changeDelivery(val) {
      var index = this.companyList.findIndex(
        (e) => e.logisticsCompanyId == val
      );
      if (index != -1) {
        var way = "到付";
        if (this.companyList[index].paymentMethod == 2) {
          way = "包邮";
        } else if (this.companyList[index].paymentMethod == 0) {
          way = "寄付";
        }
        this.deliveryMethod = this.companyList[index].name + "(" + way + ")";
        this.form.deliveryMethod = this.companyList[index].name;
        this.form.postageModeOfPayment = this.companyList[index].paymentMethod;
      }
    },
    getAddressList(isDefault) {
      var queryParams = {
        pageNum: 1,
        pageSize: 1000,
        clientId: this.form.clientId,
      };
      getAddressList(queryParams).then((response) => {
        this.addressList = response.rows;
        // 根据isDefault 判断是否开启默认选择
      });
    },
    handleAddressChange(val) {
      var index = this.addressList.findIndex((e) => e.deliveryAddressId == val);
      if (index != -1) {
        var item = this.addressList[index];
        this.form.contacts = item.name; //收货人
        this.form.address =
          item.province + item.city + item.district + item.address;
        this.form.contactNumber = item.tel;
        this.form.deliveryAddressId = item.deliveryAddressId;
      }
    },
    getAreaList(areaName = "") {
      var queryParams = {
        pageNum: 1,
        pageSize: 1000,
        areaName: areaName,
        enableFlag: "1",
        // warehouseName:"主材仓库"
      };
      getWarehouseLocationList(queryParams).then((res) => {
        this.areaList = res.rows;
      });
    },
    handleAreaChange(val) {
      var index = this.areaList.findIndex((e) => e.areaName == val);
      if (index != -1) {
        var item = this.areaList[index];
        this.form.areaName = item.areaName;
        this.form.areaId = item.areaId;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
.open-right {
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
::v-deep .myLabel {
  font-weight: bold;
  font-size: 14px;
  color: #515a6e;
}
::v-deep .operateLabel {
  background: #faecd8;
  //e1f3d8 faecd8 79bbff
}
.operateBtnGroup {
  display: flex;
  flex-wrap: wrap;
  div {
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
::v-deep .el-dialog__body {
  padding: 10px 20px !important;
}
</style>
